﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .class1{border: solid 1px #333;width:300px;height:200px;margin:5px;background-color:#59ABFF;}
    .class2{border: solid 1px #333;width:300px;height:200px;margin:5px;background-color:#}
    
    </style>

    <script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $(".mover").each(function()
            {
                $(this).bind("mouseover", function(event)
                {
                    event.stopPropagation();
                    $.MOver(event)
                });
            });

            $(".mout").each(function()
            {
                $(this).bind("mouseout", function(event)
                {
                    event.stopPropagation();
                    $.Mout(event)
                });
            });


            //鼠标滑入
            jQuery.MOver = function(event)
            {
                alert(event.target.id);

            }

            //鼠标滑出
            jQuery.Mout = function(event)
            {
                alert(event.target.id);
            }

            //显示效果
            jQuery.ShowEffect = function(effectType, event)
            {
                var obj = event.target;
                $(obj).show(effectType, 1000, null);
            }

            //隐藏效果
            jQuery.HideEffect = function(effectType, event)
            {
                var obj = event.target;
                $(obj).hide(effectType, 1000, null);
            }
        });
    </script>

</head>
<body>
    <div id="css" class="mover" paras='{"class1":"","class2":""}' style="border: solid 1px #333;width:300px;height:200px;margin:5px;">
        鼠标移动区域
      
    </div> 
     <div id="ddf" style="border: solid 1px #333;width:300px;height:200px;" class="mover">
            这里双方的离开
        </div>
</body>
</html>
